Skip to content

refactor(dashboard): complete overhaul — 11→7 pages, Router v7, design system#24

Open
PryceHedrick wants to merge 20 commits intomainfrom
feature/dashboard-overhaul
Open

refactor(dashboard): complete overhaul — 11→7 pages, Router v7, design system#24
PryceHedrick wants to merge 20 commits intomainfrom
feature/dashboard-overhaul

Conversation

@PryceHedrick
Copy link
Collaborator

Summary

Complete dashboard overhaul addressing all critical, high, and medium audit findings. Target: 48/100 → 80+.

  • CRIT-001: Fixed BudgetPanel crash from missing throttle field
  • CRIT-002: ErrorBoundary now resets on page navigation via key prop
  • CRIT-003: React Router v7 with lazy-loaded routes and <Suspense> fallback
  • CRIT-004: Split 1334-line Cognition.tsx into 9 focused sub-components
  • HIGH-004: Fixed WebSocket subscription memory leak (useStateuseEffect)
  • HIGH-005: Reduced polling from ~174 to ~35 req/min with background refetch disabled
  • HIGH-007: Configured Tailwind 4 @theme block with 45 CSS variable utilities; updated StatusBadge and Skeleton to design system
  • Consolidated 11 pages → 7 via tabbed interfaces (SystemStatus, AgentsAndTools, GovernanceAndAudit, Operations, Cognition, Autonomy, Memory)
  • Created shared UI component library (Card, MetricCard, TabGroup, CollapsibleSection, DataTable, PageHeader, PageSkeleton)
  • Added progressive disclosure with collapsible sections
  • Added prefers-reduced-motion media query for accessibility
  • All pages code-split into separate chunks (12-31KB each), main bundle 38KB

Test plan

  • npm run build passes with 0 TypeScript errors
  • npm run dev — all 7 pages render with mock data
  • Back/forward browser navigation works correctly
  • Direct URL access (e.g. /governance) works
  • 404 paths redirect to /system
  • Collapsible sections expand/collapse properly
  • Command palette (⌘K) searches and navigates to all 7 pages
  • Open Network tab — request count under 40/min
  • Enable "Reduce motion" in System Preferences — no animations

🤖 Generated with Claude Code

PryceHedrick and others added 20 commits February 6, 2026 09:21
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add defensive null checks for throttle.level, usage.percentUsed, throttle.projectedEOD
- Fix mock interceptor: /api/budget/status → budgetStatus (has throttle object)
- Add separate /api/budget/page-status route for Budget page's flat shape

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add key={currentPage} to ErrorBoundary so React unmounts/remounts
it when navigating, clearing any caught error state.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace useState initializer with useEffect for proper cleanup.
The unsubscribe function is now returned as useEffect's cleanup,
ensuring handlers are removed when components unmount.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Register all design system CSS variables as Tailwind theme tokens:
- bg-bg-card, text-text-muted, border-border-muted, etc.
- Brand: bg-ari-purple, text-ari-success, etc.
- Pillar: bg-pillar-logos, text-pillar-ethos, etc.

Also add prefers-reduced-motion media query for accessibility.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…p, DataTable

Zero-inline-style component library using Tailwind @theme utilities:
- Card: variant borders (pillar/status colors), padding/hover props
- MetricCard: color-coded stat display with size variants
- PageHeader/SectionHeader: consistent header patterns
- CollapsibleSection: progressive disclosure primitive
- TabGroup: accessible tab navigation with role/aria
- DataTable: generic sortable table with loading/empty states
- PageSkeleton: Suspense fallback for lazy-loaded pages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Install react-router-dom v7
- Rewrite App.tsx with BrowserRouter, lazy imports, Suspense fallback
- Update Sidebar: NavLink replaces onClick, 11 pages → 7 consolidated
- Layout: remove onNavigate prop (router handles navigation)
- CommandPalette: update page list to match 7-page structure

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Two-tab layout (Overview / Health) with shared UI components,
progressive disclosure via CollapsibleSection, and Tailwind @theme utilities.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Two-tab layout with agent status cards and tool registry table.
Uses shared TabGroup, Card, MetricCard, CollapsibleSection components.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Two-tab layout with council voting, constitutional rules, and audit log.
Uses DataTable for audit entries with sortable columns.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Two-tab layout with budget tracking and E2E test runner.
BudgetPanel integration with defensive null checks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Original 1334-line file split into 9 focused modules:
- index.tsx: Main orchestration (~150 lines)
- PillarHealthCard.tsx: Individual pillar health display
- LearningSection.tsx: Learning loop & analytics
- CouncilSection.tsx: Council member profiles
- InsightsSection.tsx: Insight timeline & breakdown
- SourcesSection.tsx: Knowledge sources by pillar
- ActivityFeed.tsx: Real-time cognitive activity
- FrameworkUsageChart.tsx: Framework usage stats
- constants.ts: Shared types, config, helpers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- useHealth: 5s/10s → 30s
- useSystemMetrics: 5s → 30s
- useAlerts: 5s/10s → 30s
- useBudget: 10s → 60s
- useSubagents: 5s → 30s
- useScheduler: 10s → 30s
- SubagentDetailModal: 5s → 15s
- TaskDetailModal: 10s → 30s
- All hooks: refetchIntervalInBackground: false

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ev mode

- Memory.tsx: export default for lazy() compatibility
- main.tsx: import mock interceptor in DEV mode
- vite-env.d.ts: Vite type references

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Deleted 8 files (11 pages consolidated into 7):
- Home.tsx + Health.tsx → SystemStatus.tsx
- Agents.tsx + Tools.tsx → AgentsAndTools.tsx
- Governance.tsx + Audit.tsx → GovernanceAndAudit.tsx
- Budget.tsx + E2E.tsx → Operations.tsx

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove unused imports (MetricCard, DataTable, TOOL_CATEGORIES, useEffect)
- Remove unused variables (overallStatus, groupedTools, subscribe)
- Fix Card component usage (remove unsupported style prop)
- Fix StatusBadge type narrowing for agent status
- Fix Cognition casing conflict (Cognition.tsx vs cognition/ on macOS)
- Build passes with 0 errors, all pages code-split

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- StatusBadge: bg-green-500 → bg-ari-success, etc.
- Skeleton: bg-gray-700 → bg-bg-tertiary shimmer-purple
- Skeleton cards: border-gray-700 bg-gray-800 → border-border-muted bg-bg-secondary

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
AgentsAndTools.tsx:
- Renamed "Agent Council" → "Execution Agents" with descriptive subtitle
- Added governance cross-reference card linking to Council

GovernanceAndAudit.tsx:
- Replaced 13 hardcoded council members with real 15-member council
- Organized by PILLAR (Infrastructure, Protection, Strategy, Domains, Meta)
- Uses proper council names (ATLAS, AEGIS, TRUE, VERA, etc.)
- Shows veto authority badges per member
- Displays quorum/majority/supermajority thresholds
- Added agent cross-reference card linking to Execution Agents

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…k, and feedback loop

Implements 5 council improvements:
- Pillar quorum: 3+ of 5 pillars required for valid vote
- Dissent reports: auto-generated when consensus < 80%, with precedent matching
- Emergency fast-track: 3-5 member panel, UNANIMOUS required, 24h overturn window
- User feedback loop: bridges outcome ratings to credibility system via OutcomeTracker
- Coverage expansion: rest/leisure for PULSE, purpose/meaning for VERA

Includes 34 comprehensive tests covering all new functionality.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds dashboard UI for all 4 council improvements:
- Dissent Reports section with dissenter details and precedent tracking
- Emergency Votes section with countdown timer and panel member display
- Decision Feedback Loop with stats, pending requests, and rating distribution
- New API types, client functions, mock data, and interceptor routes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant